<template>
  <div class="moun_details"> 
      <!-- 表格区 -->
      <div class="moun_deta"> 
           <moun-table :qrcode="qrcode" :mounDetail="mounDetail" :mountainText="mountainText"></moun-table>
      </div>
      <!-- 图片展示 -->
      <picture-display v-show="imgList"> 
        <h2 slot="text">图片展示</h2>   
        <img v-for="item in imgList" :key="item" slot="imgs" :src="item" alt="">   
     </picture-display>
     <div class="isers_img" v-show="userImages">
          <h2 class="iser_text">互动参与</h2>
          <img class="iser_img" v-for="item in userImages" :key="item" :src="item" alt="">
     </div>
     <!-- 山体详情 -->
     <access-list class="access_list" access="access" :mountainList="mountainList"> 
     </access-list> 
  </div>
</template>
 
<script> 
import {mountainDetail, getMountainText, getQrcode} from 'api/mounDetails'
import {getArticleList} from 'api/access'
export default {
    name:'mounDetails', 
    data(){
        return{  
            mounDetail: {},
            imgList:'',
            mountainList: [],
            userImages:[],
            // 管理目标
            mountainText:'',
            // 二维码数据
            qrcode:{}
        }
    },
    mounted(){  
        // 获取山体详情
        mountainDetail(this.$route.query.id).then(res => { 
            if(res.code == 200) {
                this.mounDetail = res.data
                this.imgList = res.data.image.split('|')  
                this.userImages = res.data.user_images
            }else{
                this.$toast({
                    message: res.msg
                })
            }
        }) 
        getArticleList(16).then(res => { 
            if(res.code == 200){
                this.mountainList = res.data.data 
            }
        })
        getMountainText().then(res => {
            if(res.code == 200){ 
                this.mountainText = res.data.text
            }
        })
        // 获取二维码
        getQrcode().then(res => {
            if(res.code == 200){
                console.log(res);
                this.qrcode = res.data
            }
        })
    }
}
</script>

<style lang="less" scoped>
.moun_details{
    background: #F7F9FB; 
}
.moun_deta{  
    padding: 10px;  
    background: #eee;
} 
.access_list{
    margin-top: 10px;
    background: #fff;
}

.isers_img {
  padding: 16px;
  font-size: 15px;
  background: #fff;
  .iser_text {
      margin-bottom: 6px; 
  }
  .iser_img{
      margin-right: 10px;
      width: 95px;
      height: 76px;
  }
 
}
</style>